<template>
<uni-shadow-root class="partials-tab-index"><import src="commonPage.wxml"></import>  
<import src="lovePage/index.wxml"></import>  
<block v-if="data.androidTemplate == """>
    <template is="commonPage" :data="firstDistance,arr,data,currentTab,scroll"></template> 
</block>
<block v-if="data.androidTemplate == "love_tab_page"">
    <template is="lovePage" :data="firstDistance,arr,data,currentTab,scroll"></template> 
</block>
<component-tag-customPage :receiveData="sendData" v-if="show"></component-tag-customPage></uni-shadow-root>
</template>

<script>
import ComponentTagNameImageLink from '../custom_page/index.vue'
import ComponentTagCustomPage from '../custom_page/index.vue'
global['__wxVueOptions'] = {components:{'component-tag-nameImageLink': ComponentTagNameImageLink,'component-tag-customPage': ComponentTagCustomPage}}

global['__wxRoute'] = 'partials/tab/index'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    sysWidth: "",
    arr: [],
    currentTab: 0,
    currentPageName: "",
    show: false,
    scroll:0,
    firstDistance:'',
  },
  ready: function () {
    let that = this;
    console.log("====tab====", that.data.data)
    that.setData({
      sysWidth: app.globalData.sysWidth,
      arr: that.data.data.jsonData.tabs
    });
    let firstTabData = that.data.data.jsonData.tabs[0];
    let linkUrl = firstTabData.linkUrl;
    let pageName = linkUrl.replace("custom_page_", "").replace(".html", "")
    let sendData = JSON.stringify({ title: 'noTitle', url: pageName ,params: {
        pageObjectId: that.data.data.pageObjectId||0,
        pageObjectType: that.data.data.pageObjectType||0
      }})
    if (pageName!='index'){
      that.setData({
        currentTab: 0,
        show: true,
        sendData: sendData
      })
    }
    that._observer = wx.createIntersectionObserver(that)
    that._observer.relativeTo('.tab-h').observe('.tab-item', (res) => {
        if (!that.data.firstDistance) {
          that.setData({
            firstDistance: res.boundingClientRect.top,
          })
        }
    })
  },
  methods: {
    // 点击标题切换当前页时改变样式
    renderPage: function (linkUrl, index){
      let that = this;
      that.setData({ show: false })
      app.globalData.showToastLoading('loading', true)
      let pageName = linkUrl.replace("custom_page_", "").replace(".html", "")
      let sendData = JSON.stringify({ title: 'noTitle', url: pageName ,params: {
        pageObjectId: that.data.data.pageObjectId||0,
        pageObjectType: that.data.data.pageObjectType||0
      }})
      if (that.data.currentTab == index) {
        console.log("当前")
        that.setData({ show: true })
        wx.hideLoading();
        return false;
      } else {
        console.log("其他")
        that.setData({
          currentTab: index,
          show: true,
          sendData: sendData
        })
      }
      if (that.data.show) {
        wx.hideLoading();
      }
      console.log("======currentPageName=====", that.data.currentPageName)
    },
    swichNav: function (e) {
      let that = this;
      console.log("===e====", e)
      let index = e.currentTarget.dataset.index;
      let currentItem = e.currentTarget.dataset.item;
      let linkUrl = currentItem?currentItem.linkUrl:'';
      that.renderPage(linkUrl, index)
    },
    scrollTo:function(object){
      let that=this;
      that.setData({
        scroll: object.scrollTop
      })
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.data.currentTab > 4) {
        this.setData({
          scrollLeft: 300
        })
      } else {
        this.setData({
          scrollLeft: 0
        })
      }
    },
  },
})
export default global['__wxComponents']['partials/tab/index']
</script>
<style platform="mp-weixin">
@import 'lovePage/index.css';
.wrap{
}
.fixed{
  position: fixed;
  top: 0;
  z-index:100;
}
.tab-h{
    height: 76rpx;
    width: 100%; 
    box-sizing: border-box;
    overflow: hidden;
    line-height: 68rpx;
    font-size: 28rpx; 
    white-space: nowrap;
    background: #fff;
}
.tab-item{
    margin:0 24rpx;
    height: 60rpx;
    display: inline-block;
    font-weight: bolder;
    position: relative;
}
.tab-item:first-child{
    margin-left: 20rpx;
    height: 60rpx;
    display: inline-block;
}
.tab-item.active{
   color: #4675F9;
   position: relative;
}
.tab-item.active:after{
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background: #4675F9;
    position: absolute; bottom: 0;
    left: 0;
    border-radius: 16rpx;
}
.item-ans{
    width: 100%;
    display: flex;
    flex-grow: row no-wrap;
    justify-content: space-between; 
    padding: 30rpx;
    box-sizing: border-box;
    height: 180rpx;
    align-items: center;
    border-bottom: 1px solid #F2F2F2;
 }
.avatar{
    width: 100rpx;
    height: 100rpx;
    position: relative;
    padding-right: 30rpx;
}
.avatar .img{
    width: 100%;
    height: 100%;
}
.avatar .doyen{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    bottom: -2px;
    right: 20rpx;
}
.expertInfo{
    font-size: 12px;
    flex-grow: 2;
    color: #B0B0B0;
    line-height: 1.5em;
}
.expertInfo .name{
    font-size: 16px;
    color:#000;
    margin-bottom: 6px;
}
.askBtn{ 
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 14px;
    border-radius: 60rpx;
    border: 1px solid #4675F9; 
    color:#4675F9;
}
.tab-content{
   margin-top: 80rpx;
}
.scoll-h{height: 100%;}
.hhh{
  width: 750rpx;
  height: 80rpx;
}
</style>